<template>
	<div class="all">
		<!-- <img src="https://lf1-cdn2-tos.bytegoofy.com/bcy/image/pattern.2de03c.png" >-->
		<ul class="masonry">
			<li>
				<section class="masonry__item" v-for="item in alllist" :key='item.id' >
					<div class="waterFallCard" v-if="(item.id%2!=0)">
						<div class="noteContent">
							<div class="masonry_note_imgbox">
								<i class="multi-icon"></i>
								<img :src="item.img">
							</div>
							<span class="cut">{{item.title}}</span>
						</div>
						<div class="cardFooter">
							<div class="cut profile-text">
								<img class="profile-avatar" :src="item.userimg">
								<p class="profile-avatar-name">{{item.username}}</p>
							</div>
							<div class="profile-zan">
								{{item.zan}}
							</div>
						</div>
					</div>
				</section>
			</li>
			<li>
				<section class="masonry__item">
					<div class="waterFallCard">
						<div class="content">
							<p class="title">你的老师做过哪些令人难忘的神操作？</p>
							<p class="answer">
								不请自来<br>就有一次，我们历史老师一进班就说“把历史练习册拿出来”，然后我们就开始掏书包。掏着掏着，我意识到事情不大对劲——历史练习册不是收了吗？也没发呀？刚想表达疑惑，老师就说“都别说话，赶紧”<br>然后<br>真的有几个同学掏出了历史练习册<br> 老师挨个收了<br>然后告诉历史课代表<br>“记住了，就这几个没交作业的”<br><br>真的记了好长时间_(:з」∠)_<br><br>二次编辑：为什么这条突然火了
							</p>
						</div>
						<div class="cardFooter">
							<div class="cut profile-text">
								<img class="profile-avatar" src="https://p3-bcy.byteimg.com/img/banciyuan/456bcb1d20c448119b69a30a209fc712~tplv-banciyuan-abig.image">
								<p class="profile-avatar-name">公玉卿</p>
							</div>
							<div class="profile-zan">
								3634
							</div>
						</div>
					</div>
				</section>
				<section class="masonry__item" v-for="item in alllist" :key='item.id' >
					<div class="waterFallCard" v-if="(item.id%2==0)">
						<div class="noteContent">
							<div class="masonry_note_imgbox">
								<i class="multi-icon"></i>
								<img :src="item.img">
							</div>
							<span class="cut">{{item.title}}</span>
						</div>
						<div class="cardFooter">
							<div class="cut profile-text">
								<img class="profile-avatar" :src="item.userimg">
								<p class="profile-avatar-name">{{item.username}}</p>
							</div>
							<div class="profile-zan">
								{{item.zan}}
							</div>
						</div>
					</div>
				</section>
			</li>
		</ul>
	</div>
</template>

<script>
// import bus from '../../eventBus.js'
export default {
	name: 'all',
	data(){
		return{
			masonry:[{
				id:1,
				img:'https://p9-bcy.byteimg.com/img/banciyuan/cf993929ce664b0d9a4ccd8b3c247a73~tplv-banciyuan-4X6.image',
				title:'魈梦男（立绘拿出来晒晒_(:з」∠)_在完善信息了！！',
				userimg:'https://p9-bcy.byteimg.com/img/banciyuan/e26a6fd54de1478a869edca7457511d7~tplv-banciyuan-abig.image',
				username:'煞笔阿盐子',
				zan:648
			},{
				id:2,
				img:'https://p3-bcy.byteimg.com/img/banciyuan/8036a67ed29e417e93131a618c82e845~tplv-banciyuan-4X6.image',
				title:'一波作品展示~',
				userimg:'https://p3-bcy.byteimg.com/img/banciyuan/8f6aa433150d47bcb580789add8d666d~tplv-banciyuan-abig.image',
				username:'式微咿呀',
				zan:4364
			},{
				id:3,
				img:'https://p9-bcy.byteimg.com/img/banciyuan/fcb06fc19a154948840b2a701da28770~tplv-banciyuan-4X6.image',
				title:'不给这么飒的貂蝉姐姐点个赞吗(。・∀・)ノ゛@露兒大魔王_',
				userimg:'https://p9-bcy.byteimg.com/img/banciyuan/e26a6fd54de1478a869edca7457511d7~tplv-banciyuan-abig.image',
				username:'初初初圆子个yuan',
				zan:3612
			}],
			alllist:[],
			upload:[]
		}
	},
	methods:{
		getList(){
			const list = JSON.parse(window.localStorage.getItem( "upload")) || [];
			this.alllist = [...this.masonry,...list]
			// return this.alllist
			// this.upload = list
		},
		// getUp(){
		// 	bus.$on("upEvent",function(u){
		// 		this.upload = u;
		// 		this.alllist = [...this.masonry,...this.upload]
		// 	})
		// }
	},
	created(){
		this.getList()
	},
	updated(){
		// let self = this
		// self.getUp()
		this.getList()
	}
}
</script>

<style scoped lang="scss">
.all{
	img{
		width: 100%;
	}
	margin-bottom: 10vw;
	.masonry{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		list-style: none;
		margin: 0 .1rem;
		padding-top: 12vw;
		li{
			width: 48%;
			.waterFallCard{
				padding-bottom: 4vw;
				.noteContent{
					.masonry_note_imgbox {
						position: relative;
						background: #f5f5fa;
						overflow: hidden;
						border-radius: 8px;
						img{
							display: block;
							width: 100%;
							border-radius: 8px;
						}
						&:after{
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							width: 200%;
							border: 1px solid #e9e9f0;
							border-radius: 14px;
							height: 200%;
							transform-origin: left top;
							transform: scale(.5);
							pointer-events: none;
						}
					}
					span{
						display: block;
						font-size: .2rem;
						margin: 1.5vw 0;
						color: #575759;
					}
				}
				.content{
					padding: 2vw;
					display: block;
					margin-bottom: 1vw;
					border-radius: 8px;
					background-color: #f5f5fa;
					overflow: hidden;
					
					.title {
						font-weight: 700;
						overflow: hidden;
					}
					.answer{
						margin-top: .16rem;
						font-size: .22rem;
						overflow: hidden;
						color: #575759;
						max-height: 34vw;
					}
				}
				.cut{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-wrap: normal;
				}
				.cardFooter {
					font-size: .24rem;
					line-height: 1.2;
					font-weight: 700;
					display: flex;
					margin-top: .06rem;
					.profile-text {
						display: flex;
						align-items: center;
						color: #252526;
						font-size: .2rem;
						position: relative;
						font-weight: 400;
						.profile-avatar {
							margin-right: 4px;
							width: 5vw;
							border-radius: 50%;
						}
						.profile-avatar-name {
							max-width: 90px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.profile-zan {
						font-weight: 500;
						color: #a1a1a6;
						font-size: .2rem;
						margin-left: auto;
						height: 16px;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
}
</style>
